// import viteLogo from "/vite.svg";
// import { useState } from "react";
import { App as AntdApp, ConfigProvider, ThemeConfig } from "antd";
import enUS from "antd/locale/en_US";
import zhCN from "antd/locale/zh_CN";
import { useEffect, useState } from "react";

import RootRouterProvider from "@/router/provider";

import "./App.css";
import { useSelector } from "./hooks/use-selector";
import { useGlobalStore } from "./stores/global";
import { useSettingStore } from "./stores/setting";
import { generateDarkTheme } from "./theme/dark";
import { generateLightTheme } from "./theme/light";
import { i18n } from "./utils/i18n";

// import reactLogo from "./assets/react.svg";

function App() {
    // const [count, setCount] = useState(0);

    const { darkMode, lang } = useGlobalStore(useSelector(["darkMode", "lang"]));

    // ??? TODO
    const [curTheme, setCurTheme] = useState<ThemeConfig>(() => {
        return darkMode ? generateDarkTheme("") : generateLightTheme("");
    });

    // ??? TODO
    const { primaryColor } = useSettingStore(useSelector(["primaryColor"]));

    useEffect(() => {
        if (darkMode) {
            const theme = generateDarkTheme(primaryColor);
            document.body.classList.remove("light");
            document.body.classList.add("dark");
            document.body.style.backgroundColor = theme.token?.colorBgLayout || "";
            setCurTheme(theme);
        } else {
            const theme = generateLightTheme(primaryColor);
            document.body.classList.remove("dark");
            document.body.classList.add("light");
            document.body.style.backgroundColor = theme.token?.colorBgLayout || "";
            setCurTheme(theme);
        }
    }, [darkMode, primaryColor]);

    useEffect(() => {
        i18n.changeLanguage(lang);
    }, [lang]);

    return (
        <>
            {/* <div>
                <a
                    href="https://vitejs.dev"
                    target="_blank"
                >
                    <img
                        src={viteLogo}
                        className="logo"
                        alt="Vite logo"
                    />
                </a>
                <a
                    href="https://react.dev"
                    target="_blank"
                >
                    <img
                        src={reactLogo}
                        className="logo react"
                        alt="React logo"
                    />
                </a>
            </div>
            <h1>Vite + React</h1>
            <div className="card">
                <button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
                <p>
                    Edit <code>src/App.tsx</code> and save to test HMR
                </p>
            </div>
            <p className="read-the-docs">Click on the Vite and React logos to learn more</p> */}
            <ConfigProvider
                theme={curTheme}
                locale={lang === "zh" ? zhCN : enUS}
                componentSize="middle"
            >
                <AntdApp>
                    <RootRouterProvider />
                </AntdApp>
            </ConfigProvider>
        </>
    );
}

export default App;
